<template>
  <section>
    <div>
      <edit-table
        ref="table"
        :table-column="tableColumn"
        is-index
        :api-path="apiPath">
        <el-table-column slot="operate" label="操作" width="230" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="textButton"
              icon="el-icon-edit-outline"
              @click="openDialog('edit',scope.row)"
            ></el-button>
            <el-button
              type="text"
              class="textButton"
              style="color:red;"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </edit-table>
    </div>
    <edit-dialog
      :visible-flag='dialogData.visibleFlag'
      :data="dialogData.editData"
      :api-path="apiPath"
      @close-dialog="closeDialog"
      @submitForm="submitForm">
      <edit-form
        slot="dialog-section"
        :data="dialogData.editData"/>
    </edit-dialog>
  </section>
</template>

<script>
import request from '@/network/request'
import editTable from '@/components/editTable'
import editDialog from '@/components/editDialog'
import editForm from './editForm'
import { tableColumn, apiPath } from './data.enum.js'

export default {
  components: {
    editTable,
    editDialog,
    editForm
  },
  beforeMount () {
    this.tableColumn = tableColumn
  },
  data () {
    return {
      apiPath: apiPath,
      dialogData: {
        visibleFlag: false,
        dialogTitle: '新增',
        formType: 'add',
        editData: {}
      }
    }
  },
  methods: {
    openDialog (formType, editData = {}) {
      this.dialogData = {
        visibleFlag: true,
        formType,
        editData,
        dialogTitle: formType === 'add' ? '新增' : '编辑'
      }
    },
    handleDelete (index, row) {
      this.$refs.table.handleDelete(index, row)
    },
    closeDialog () {
      this.$refs.table.getData()
      this.dialogData.visibleFlag = false
    },
    submitForm () {
      const data = this.dialogData.editData
      const params = {
        id: data.id,
        date: data.date,
        xuningTime: data.xuningTime,
        drugpumpflow1: data.drugpumpflow1,
        mudpumpflow1: data.mudpumpflow1,
        drugpumpflow2: data.drugpumpflow2,
        mudpumpflow2: data.mudpumpflow2,
        drugpumpflow3: data.drugpumpflow3,
        mudpumpflow3: data.mudpumpflow3,
        drugpumpflow4: data.drugpumpflow4,
        mudpumpflow4: data.mudpumpflow4,
        tankliquidlevel: data.tankliquidlevel,
        flocculantnumber: data.flocculantnumber,
        ironnumber: data.ironnumber,
        recorder: data.recorder,
        remarks: data.remarks,
        factory: this.$store.getters.getFactory
      }
      if (data.remarks !== null) {
        params.remarks = data.remarks
      } else {
        params.remarks = ''
      }
      request({
        method: 'post',
        url: this.apiPath + '/update',
        params: params
      }).then((res) => {
        if (res.data.code === 200 && res.data.message === 'SUCCESS') {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
        } else if (res.data.message !== 'SUCCESS') {
          this.$message.error(res.data.message)
        } else if (res.data.code === 400) {
          this.$message.error(res.message)
        } else {
          this.$message.error('保存失败!')
        }
        this.closeDialog()
      })
    }
  }
}
</script>

<style scoped>
/*滚动条样式*/
/deep/ .scrollbar {
  white-space: nowrap;
}

.el-scrollbar {
  display: flex;
  justify-content: space-around;
  padding: 0 10px;
}

/deep/ .el-scrollbar__wrap {
  overflow: scroll;
  width: 110%;
  height: 100%;
}
</style>
